<template>
  <div  class="blue">
    <div  class="father_box">
      <div  class="son">
        <img src="../../assets/img/touxiang.jpg" alt="">
      </div>
      <el-form ref="login_form_Ref"  :model="loginObject"  :rules="login_rules"  class="login_form" >
        <el-form-item prop="username" >
          <el-input   v-model="loginObject.username"      prefix-icon="iconfont icon-yidongduanicon-" type="text"></el-input>
        </el-form-item>
        <el-form-item prop="password" >

          <el-input  v-model="loginObject.password"   prefix-icon="iconfont icon-mima"  type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="get-code" >
            <el-input  v-model="loginObject.code"   prefix-icon="iconfont icon-yanzhengma"  type="text"  class="code_input"></el-input>
            <s-identify :identifyCode="identifyCode" class="identify"></s-identify>
            <a herf="#" @click="refreshCode()">刷新验证码</a>
          </div>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="login()"  >登录</el-button>
          <el-button type="info" @click="removeForm()">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>
import SIdentify from '../canvas/SIdentify'
export default {
  components: { SIdentify },
  data () {
    return {
      identifyCode: '',
      identifyCodes: '0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ',
      loginObject: {
        username: 'admin',
        password: '123456',
        code: ''
      },
      login_rules: {
        username: [
          {
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 10,
            message: '账号长度应该在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入登录密码',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 15,
            message: '密码长度应该在 6 到 15 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login () {
      if (this.loginObject.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message.error('请重新输入验证码')
        this.refreshCode()
      } else {
        this.$router.push('./home/welcome')
        this.$message.success('登录成功！')
      }
    },
    refreshCode () {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    randomNum (min, max) {
      max = max + 1
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode (data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += (data[this.randomNum(0, data.length - 1)])
      };
      console.log(this.identifyCode)
    }
  },
  created () {
    this.refreshCode()
  },
  removeForm () {
    this.$refs.login_form_Ref.resetFields()
  }
}

</script>

<style   scoped>
.blue {
  height: 100%;
  background-image:url('../../assets/img/login.jpg')
}
.father_box {
  width:450px;
  height:350px;
  position: absolute;
  /*让盒子的左上角垂直居中并且水平居中*/
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background-color:#fff
}
.son  {
  width:130px;
  height:130px;
  position: absolute;
  padding:10px;
  left:50%;
  transform: translate(-50%,-50%);
  border:1px  solid #eee;
  border-radius:50%;
  background-color:#fff;

  box-shadow: 0px 0px 10px #ddd;
}
.son  img{
  width: 100%;
  height:100%;
  background-color:#eee;
  border-radius:50%;
}
.login_form{
  position: absolute;
  top:100px;
  /*width=padding+border+width*/
  width:100%;
  padding:0px 20px;
  box-sizing: border-box;
}

.btn{
  display:flex;
  justify-content:flex-end;

}
.code_input{
  position: absolute;
  display:inline-block;
  height:20px;
  width:80px  !important;
  left:0px;
}
.get-code {
  display:flex;
  justify-content:space-between;
}
.get-code .identify{
  margin-left: 120px;
}
.get-code a{
    display: inline-block;
    font-size:12px;
    margin-left: 20px;
    color:dodgerblue;
    cursor: pointer;
}
</style>
